<template>
  <div>
    <div class="flex">
      <div>
        <el-form :inline="true" :model="where" label-position="top">
          <el-form-item>
            <el-input v-model="whereType.value" clearable>
              <template #prepend>
                <el-select v-model="whereType.key" style="width:120px">
                  <el-option :label="plugin.lang('form.number')" value="number"></el-option>
                  <el-option :label="plugin.lang('form.name')" value="name"></el-option>
                  <el-option :label="plugin.lang('form.sname')" value="sname"></el-option>
                  <el-option :label="plugin.lang('form.code')" value="code"></el-option>
                </el-select>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="where.supplier_id" :placeholder="plugin.lang('form.supplier_id')" style="width:180px" filterable remote clearable :remote-method="onSupplier" :loading="supplier.loading">
              <el-option
                v-for="item in supplier.list"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="model.page(1)" plain>
              <template #icon>
                <i class="iconfont min icon-search-max"></i>
              </template>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-dropdown @command="command => form.open({}, command)" style="margin-right: 10px">
          <el-button v-if="menuId != 0" type="primary">
            {{ lang.t('common.create') }} <i class="iconfont mini icon-arrow-down el-icon--right"></i>
            <template #icon>
              <i class="iconfont mini icon-add-max"></i>
            </template>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="0">{{ lang.t('common.oneCreate') }}</el-dropdown-item>
              <el-dropdown-item command="1">{{ lang.t('common.toCreate') }}</el-dropdown-item>
              <el-dropdown-item command="2">{{ plugin.lang('inbound.btn.create') }}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-button v-if="menuId == 'all'" type="primary" @click="form.importOpen()" plain>{{ lang.t('common.import') }}
          <template #icon>
            <i class="iconfont mini icon-download-max"></i>
          </template>
        </el-button>
        <el-button v-if="menuId != 0" type="success" @click="excel.open()" plain>{{ lang.t('common.excel') }}
          <template #icon>
            <i class="iconfont mini icon-upload-max"></i>
          </template>
        </el-button>
        <el-button v-if="menuId == 0" type="danger" @click="multiple.open()" plain>{{ plugin.lang('btn.delete_no_menu') }}
          <template #icon>
            <i class="iconfont mini icon-ashbin-max"></i>
          </template>
        </el-button>
      </div>
    </div>
    <Table 
      @form="data => form.open(data)" 
      @count="data => count.open(data)" 
      @supplier_order="data => supplierOrder.open(data.id)" 
      @outbound="data => outbound.open(data.id)"
      @inbound="data => inbound.open(data.id)"
      @label="labelModel.load"
    />
    <div class="page">
      <el-pagination
        @current-change="model.page"
        :current-page="where.page"
        :page-size="where.page_size"
        layout="total, prev, pager, next, jumper"
        :total="where.page_total"
        background>
      </el-pagination>
    </div>
    <Form ref="form" />
    <Count ref="count" />
    <SupplierOrder ref="supplierOrder" />
    <Outbound ref="outbound" />
    <Inbound ref="inbound" />
    <KeyCode @ok="onScanBarCode" :window="true" />
    <Multiple ref="multiple" @open="getNoMenu" @start="onDelNoMenu" />
    <Excel ref="excel" :select="excelSelect" @load="excelLoad">
      <el-alert :title="plugin.lang('alert.excel')" type="warning" :closable="false" style="margin-bottom: 20px" />
    </Excel>
  </div>
</template>
<script>
import { ref, reactive } from 'vue'
import app from '@/app'
import model from '../../model'
import menuModel from '../../model/menu'
import taxModel from '@/plugin/config/model/tax'
import labelModel from '../../model/label'
import { get as getSupplier } from '@/api/erp/supplier'

import Table from './table'
import Form from './form'
import Count from './count'
import SupplierOrder from './supplier_order'
import Outbound from './outbound'
import Inbound from './inbound'
import KeyCode from '@/components/keyCode'
import Multiple from '@/components/multiple'
import Excel from '@/components/excel'

export default {
  components: {
    KeyCode,
    Multiple,
    Table,
    Form,
    Count,
    SupplierOrder,
    Outbound,
    Inbound,
    Excel
  },
  setup() {
    // 插件
    const plugin = app.plugin.index

    // 条件
    const where = model.data

    // 查询条件 
    const whereType = model.where

    // 选择分类
    const menuId = menuModel.id

    // 表单
    const form = ref()

    // 库存
    const count = ref()

    // 入库记录
    const supplierOrder = ref()

    // 出库记录
    const outbound = ref()
    const inbound = ref()

    // 多任务处理
    const multiple = ref()

    // 导出
    const excel = ref()

    // 查询未分类
    let noMenu = []
    const getNoMenu = () => {
      model.getNoMenu().then(res => {
        noMenu = res
        multiple.value.handle(res.length, 0)
      })
    }

    // 清空未分类
    const onDelNoMenu = async () => {
      for (let i = 0; i < noMenu.length; i++) {
        await model.delete(noMenu[i].id)
        multiple.value.handle(noMenu.length, i + 1)
      }
      model.get()
      multiple.value.status(true)
    }

    // 条码查询
    const onScanBarCode = code => {
      where.value.page = 1
      whereType.value.key = 'code'
      whereType.value.value = code
      model.get().then(() => {
        // 判断是否有内容
        if(!model.getList().length) {
          // 创建内容时，内置条码数据
          form.value.open(model.getWhere())
        }
      })
    }

    // 导出商品
    const excelSelect = {
      code: {
        label: plugin.lang('form.code'),
        render: data => data.code
      },
      number: {
        label: plugin.lang('form.number'),
        render: data => data.number
      },
      name: {
        label: plugin.lang('form.name'),
        render: data => data.name
      },
      price: {
        label: plugin.lang('form.price'),
        render: data => Number(data.price)
      },
      menu_id: {
        label: plugin.lang('form.menu_id'),
        render: data => menuModel.query(data.menu_id)?.name
      },
      tax_id: {
        label: plugin.lang('form.tax_id'),
        render: data => taxModel.id(data.tax_id)?.name
      },
      count: {
        label: plugin.lang('form.count'),
        render: data => data.count
      },
      sname: {
        label: plugin.lang('form.sname'),
        render: data => data.sname
      },
      price_discount: {
        label: plugin.lang('form.price_discount'),
        render: data => Number(data.price_discount)
      },
      price_cost: {
        label: plugin.lang('form.price_cost'),
        render: data => Number(data.price_cost)
      },
      unit: {
        label: plugin.lang('form.unit'),
        render: data => data.unit
      },
      unit_count: {
        label: plugin.lang('form.unit_count'),
        render: data => Number(data.unit_count)
      },
      count_min: {
        label: plugin.lang('form.count_min'),
        render: data => Number(data.count_min)
      },
      count_max: {
        label: plugin.lang('form.count_max'),
        render: data => Number(data.count_max)
      },
    }

    const excelLoad = () => {
      let i = 0
      excel.value.load(async() => {
        // 请求数据
        i++
        const data = await model.excel(i)
        // 导出原数据
        return [data.total, data.data]
      })
    }

    // 选择供货商
    const supplier = reactive({
      list: [],
      loading: false
    })
    const onSupplier = (name) => {
      supplier.loading = true
      getSupplier({ name }).then(res => {
        supplier.list = res.data
      }).finally(() => supplier.loading = false)
    }
    
    // 首次加载
    model.get()
    onSupplier()

    return {
      lang: app.lang,
      plugin: app.plugin.index,
      model,
      labelModel,
      menuId,
      where,
      whereType,
      form,
      count,
      supplierOrder,
      outbound,
      inbound,
      multiple,
      excel,
      getNoMenu,
      onDelNoMenu,
      onScanBarCode,
      excelSelect,
      excelLoad,
      supplier,
      onSupplier
    }
  }
}
</script>